import React, { useState, useEffect } from 'react';
function Rotate() {
    const [activeIndex, setActiveIndex] = useState(9); // 初始索引为9，与Vue示例匹配  
    const [isFlag, setIsFlag] = useState(false); // 初始状态为false  
    const data = [
        {
            img: "/src/assets/imgs/交通事故智能定位分析系统_nor.png",
            img_on: "/src/assets/imgs/交通事故智能定位分析系统_hov.png",
            title: "校园定位"
        },
        {
            img: "/src/assets/imgs/交通安全画像系统_nor.png",
            img_on: "/src/assets/imgs/交通安全画像系统_hov.png",
            title: "安全防护"
        },
        {
            img: "/src/assets/imgs/非机动车未带头盔识别系统_nor.png",
            img_on: "/src/assets/imgs/非机动车未带头盔识别系统_hov.png",
            title: "头盔识别"
        },
        {
            img: "/src/assets/imgs/可视化作战平台_nor.png",
            img_on: "/src/assets/imgs/可视化作战平台_hov.png",
            title: "可视化平台"
        },
        {
            img: "/src/assets/imgs/交通态势监控系统_nor.png",
            img_on: "/src/assets/imgs/交通态势监控系统_hov.png",
            title: "交通监控"
        },
        {
            img: "/src/assets/imgs/停车卡口接入系统_nor.png",
            img_on: "/src/assets/imgs/停车卡口接入系统_hov.png",
            title: "停车管理"
        },
    ];

    // 鼠标进入  
    const handleMouseEnter = (index: React.SetStateAction<number>) => {
        setIsFlag(true);
        setActiveIndex(index);
    };

    // 鼠标移除  
    const handleMouseLeave = () => {
        setIsFlag(false);
        setActiveIndex(-1);
    };

    // 点击事件  
    const handleTabClick = (item: { img?: string; img_on?: string; title: any; }) => {
        alert(`您点击了${item.title}`);
    };

    useEffect(() => {
        const balls = document.querySelectorAll('.ball');
        balls.forEach((ball, i) => {
            ball.style.animationDelay = `${-5 - 3.3 * i}s, ${-3.3 * i}s, ${-3.3 * i}s`;
        });
    }, []);
    return (
        <div className="container">
            {data.map((item, index) => (
                <div
                    key={index}
                    className={`ball ${isFlag && 'active_item'} ${activeIndex === index && 'is_active'}`}
                    onMouseEnter={() => handleMouseEnter(index)}
                    onMouseLeave={handleMouseLeave}
                    onClick={() => handleTabClick(item)}
                >
                    <img src={activeIndex === index ? item.img_on : item.img} alt="" />
                    <p style={{ fontSize: '15px',color:'white' }}>{item.title}</p>
                </div>
            ))}
        </div>
    );
}

export default Rotate